import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import { Button, message, Space, Table } from "antd";
import FormItems from "@/components/FormItem";
import { useEffect, useRef, useState } from "react";
import moment from "moment";
import { useNavigate } from "react-router-dom";
import { statusUserList, wordList } from "@/api/modules/word";

type ArrItems = {
	name: string;
	label: string;
	type: string;
	placeholder?: string;
	rules?: any[];
	options?: any[] | any;
};

// export const data: any[] = [
// 	{
// 		code: "1",
// 		name: "John Brown",
// 		tel: "17511438950",
// 		city: "江苏省 南京市 江宁区",
// 		persons: [
// 			{ name: "张三", tel: "17511438950", type: "父亲" },
// 			{ name: "张四", tel: "17511438950", type: "叔叔" }
// 		],
// 		time: "2025-03-04",
// 		type: "服务用户"
// 	},
// 	{
// 		code: "2",
// 		name: "sss",
// 		tel: "17511438950",
// 		city: "江苏省 南京市 秦淮区",
// 		persons: [{ name: "李四", tel: "17511438950", type: "母亲" }],
// 		time: "2025-03-04",
// 		type: "新用户"
// 	}
// ];

const Embedded = () => {
	const navigate = useNavigate();
	const [data, setData] = useState<any[]>([]);
	console.log(navigate, data);
	const [formVal, setFormVal] = useState<any>({});
	const [opti, setOpti] = useState<any[]>([]);
	console.log(opti);

	const getWordList = async (val: any) => {
		const { data } = await wordList({
			current: 1,
			size: 999,
			...val
		});
		setData(data.data);
	};

	useEffect(() => {
		getWordList({});
	}, []);

	const columns: any[] = [
		{
			title: "序号",
			dataIndex: "code",
			key: "code",
			align: "center",
			render: (_: any, item: any, ind: number) => ind + 1
		},
		{
			title: "文章封面",
			dataIndex: "image",
			key: "image",
			align: "center"
		},
		{
			title: "文章标题",
			dataIndex: "title",
			key: "title",
			align: "center"
		},
		{
			title: "创建时间",
			dataIndex: "createdAt",
			key: "createdAt",
			align: "center"
		},
		{
			title: "文章优先级",
			dataIndex: "orderNum",
			key: "orderNum",
			align: "center"
		},
		{
			title: "文章状态",
			dataIndex: "room",
			key: "room",
			align: "center",
			render: (_: any, record: any) => {
				return record.isEnabled === 1 ? "启用" : "停用";
			}
		},
		{
			title: "操作",
			dataIndex: "",
			key: "x",
			align: "center",
			render: (_: any, record: any) => (
				<p style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
					<a onClick={() => navigate(`/book/detail?id=${record?.id}`)}>详情</a>
					<a
						onClick={async () => {
							await statusUserList({
								id: record.id,
								status: record.isEnabled === 1 ? 0 : 1
							});
							message.success("操作成功");
							getWordList({});
						}}
					>
						{record.isEnabled === 0 ? "启用" : "停用"}
					</a>
				</p>
			)
		}
	];
	const formRef: any = useRef(null);
	// const items: ArrItems[] = [
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "name",
	// 		label: "同步下拉框",
	// 		type: "2",
	// 		options: [
	// 			{ label: "选项1", value: "1" },
	// 			{ label: "选项2", value: "2" }
	// 		]
	// 	},
	// 	{
	// 		name: "names",
	// 		label: "异步数据下拉框",
	// 		type: "2",
	// 		options: opti
	// 	},
	// 	{
	// 		name: "time",
	// 		label: "日期选择",
	// 		type: "3"
	// 	},
	// 	{
	// 		name: "times",
	// 		label: "日期范围选择",
	// 		type: "4"
	// 	},
	// 	{
	// 		name: "timeRange",
	// 		label: "时间范围选择",
	// 		type: "5"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	}
	// ];

	// 模拟异步
	const items: ArrItems[] = [
		{
			name: "title",
			label: "文章标题",
			type: "1"
		},
		{
			name: "createdAt",
			label: "创建时间",
			type: "3"
		},
		{
			name: "status",
			label: "文章状态",
			type: "2",
			options: [
				{ label: "禁用", value: "0" },
				{ label: "启用", value: "1" }
			]
		}
	];
	const a = () => {
		return new Promise(response => {
			setTimeout(() => {
				response([
					{ label: "选项3", value: "3" },
					{ label: "选项4", value: "4" }
				]);
			}, 3000);
		});
	};

	// 提前请求 获取下拉框数据
	const init = async () => {
		const arr: any[] = (await a()) as any;
		setOpti(arr);
	};

	useEffect(() => {
		init();
	}, []);

	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	// const moreOnClick = () => {
	// 	message.success("点击更多");
	// };

	const tableSearch = () => {
		message.success(JSON.stringify(formVal));
		getWordList(formVal);
	};

	// 对某些 搜索条件进行处理
	const changeSearch = (val: any) => {
		if (val.time) val.time = moment(val.time).format("YYYY-MM-DD");
		if (val.times) {
			val.startTime = moment(val.times[0]).format("YYYY-MM-DD");
			val.endTime = moment(val.times[1]).format("YYYY-MM-DD");
			delete val.times;
		}
		if (val.timeRange) {
			val.startTimes = moment(val.timeRange[0]).format("YYYY-MM-DD hh:mm:ss");
			val.endTimes = moment(val.timeRange[1]).format("YYYY-MM-DD hh:mm:ss");
			delete val.timeRange;
		}
		setFormVal(val);
	};

	return (
		<div>
			<LayoutWhite>
				<Title word={"就诊百科"} more={moreButton()} />
				<FormItems itemProps={items} callback={val => changeSearch(val)} ref={formRef} />
				<div style={{ display: "flex", flexDirection: "column" }}>
					<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
						<Space>
							<Button
								onClick={() => {
									setFormVal({});
									formRef.current.reset();
								}}
							>
								重置
							</Button>
							<Button type="primary" onClick={() => tableSearch()}>
								搜索
							</Button>
							<Button type="primary" onClick={() => navigate("/book/add")}>
								新增
							</Button>
						</Space>
					</div>
					<Table bordered={true} columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
				</div>
			</LayoutWhite>
		</div>
	);
};
export default Embedded;
